{% extends "base_main.html" %}

{% block page_title %}Homepage{% endblock %}
{% block meta_title %}WhatYou - Tell the world what you are doing, Twitter style!{% endblock %}
{% block meta_description %}Publish multiple statuses, so your friends know what you are up to{% endblock %}
{% block meta_keywords %}what, you, whatyou, publish, status, twitter, clone, alternative, replacement, google, appengine, gae{% endblock %}

{% block javascript %}
	{{ block.super }}
	<script type="text/javascript" src="/static/js/autocomplete.js"></script>
	<script type="text/javascript">
		function get_latest_update() {
			$("#latest_updates").load("/ajax/get_latest_update/", '', callback);
		}
		function callback() {
			setTimeout("get_latest_update();", 60000);
		}

		$(document).ready(function(){
			get_latest_update();
			$("#id_verb").autocomplete("/ajax/verbs/get/");
		    $("#clock").click(function () {
		      $(this).fadeOut();
		 	  $(".options_time").fadeIn();
		    });
		    $("#update_profile").click(function () {
		      $("li#update_profile_form").slideDown();
		    });
		    $("input#id_body").keypress(function () {
			  value = $(this).val().toLowerCase();
			  if(value.indexOf("my ") > -1 | value.indexOf("me ") > -1) {
			    $("#tip_tpc").slideDown();
			  }
		    });
		});
	</script>
{% endblock %}

{% block css %}
	{{ block.super }}
	<link href="/static/css/autocomplete.css" rel="stylesheet" type="text/css" />
{% endblock %}

{% block menu_class_home %}current_page_item{% endblock %}

{% block menu_01 %}
	{% if user %}

		<li>
			<h2>Welcome</h2>
			<ul>
				<li>
					Logged in as: <strong>{{ person.friendly_name }}</strong>
					<br/>
					{{ person.update_count }} Update{{ person.update_count|pluralize}}
					<br/>
					<a id="update_profile" href="#">Update Profile</a>
				</li>
				<li id="update_profile_form" style="display:{% ifequal person.friendly_name None %}block{% else %}none{% endifequal %};">
					<form method="post" action="/friends/update/">
						<!--
						<label for"id_friendly_name">Nickname:</label>
						<br/>
						<input id="id_friendly_name" type="text" name="friendly_name" maxlength="50" size="15" />
						<br/>
						<label for"id_gender">Gender:</label><br/>
						<select id="id_gender" name="gender">
							<option id="">Choose...</option>
							<option id="m">Male</option>
							<option id="f">Female</option>
						</select>
						<br/><br/>
						-->
						{{ update_profile_form.as_p }}
						<input type="submit" value="Update" />
					</form>
				</li>
			</ul>
		</li>
		{% if friends %}
			<li>
				<h2>Friends</h2>
				<ul>
					{% for friend in friends %}
						<li>
							<a href="/friends/profile/{{ friend.key }}/"><strong>{{ friend.friendly_name }}</strong></a>
						</li>
					{% endfor %}
				</ul>
			</li>
		{% endif %}
	{% endif %}
	<li>
		<h2>Latest Update</h2>
		<ul>
			<div id="latest_updates">
				{% if latest_update %}
					<li>
						<strong>
							Please Wait...
						</strong>
					</li>
				{% endif %}
			</div>
		</ul>
	</li>
	<li>
		<h2>Popular Actions</h2>
		<ul>
			{% for verb in verbs %}
				<li>
					<strong>{{ verb.name|capfirst }}</strong> ({{ verb.used_count }})
					<a href="/rss/updates/verb/{{ verb.name }}/"><img src="/static/images/icons/rss_small.jpg" border="0" alt="RSS Feed" /></a>
				</li>
			{% endfor %}
		</ul>
	</li>
	<li>
		<h2>RSS Feeds</h2>
		<ul>
			<li><a href="/rss/updates/latest/">Latest Updates</a></li>
		</ul>
{% endblock %}

{% block content_main %}
	{% ifequal user None %}
		<h1>Welcome to WhatYou...</h1>
		<h2>Getting started</h2>
		<p>In order to use WhatYou, you will need to <a href="{{ login_url }}">login</a> using any personal Google account.
		Unfortunately, we do not support "Google Apps For Domains" login details. Once logged in, you can start posting updates and adding friends to your profile.</p>
		<h2>What is it then?</h2>
		<p>WhatYou is a multi-state microblogging service (similar to Twitter) that allows multiple "tweets" (or "updates") to be sent by each user.</p>
		<p>Each message is assigned an action (or verb) such as "watching", "eating" or "drinking", which can be used via the API (coming soon) to find out what your friends are actually doing. Imagine setting up filtered RSS/XML/JSON feeds with custom rules to find out which friends are "eating", or "working".</p>
		<p>Also, WhatYou allows you to optionally specify a finish time for the update. This is because you may only be doing something for a few minutes, and not bother deleting or replacing the update when you are done. All updates with finish times timeout and clear automatically.</p>
		<h2>What is coming soon?</h2>
		<ul>
			<li>Receive email and SMS notifications from friends you are stalking</li>
			<li>Get and update statuses via RSS/XML API</li>
		</ul>
		<h2>Why did we make WhatYou?</h2>
		<p>There are two main reasons why we started this project:</p>
		<ul>
			<li>To learn how to develop applications on Google's <a href="http://code.google.com/appengine/" target="_blank">AppEngine</a> platform (using Python and Django)</li>
			<li>To create a scalable reliable Twitter alternative</li>
		</ul>
		<h2>Getting involved</h2>
		<p>WhatYou is an open source project so if you want to get involved, why not email us at <a href="mailto:whatyouproject@gmail.com?subject=ProjectInvolvement">whatyouproject@gmail.com</a>. If you are interested, feel free to check out the source code which is hosted by Google Code and is available at: <a href="http://code.google.com/p/whatyou/" target="_blank">http://code.google.com/p/whatyou/</a>.</p>
	{% else %}
		<h1>What You {{ title_verb|capfirst }} ...</h1>
		<form method="post" action="/update/create/">
			<table class="update_form">
				<tr>
					<td><label for="id_verb">{{ form.verb.label }}</label></td>
					<td><label for="id_body">{{ form.body.label }}</label></td>
					<td></td>
					<td><div class="options_time" style="display:none;"><label for="id_finish_time">{{ form.finish_time.label }}</label></div></td>
				</tr>
				<tr>
					<td>I am <input id="id_verb" name="verb" maxlength="255" type="text"></td>
					<td><input id="id_body" name="body" maxlength="255" type="text"></td>
					<td><img id="clock" src="/static/images/icons/clock.png" alt="Set Finish Time" /></td>
					<td><div class="options_time" style="display:none;">{{ form.finish_time }}</div></td>
				</tr>
				<tr>
					<td>e.g. watching, eating, drinking</td>
					<td>television, fast food, beer</td>
					<td></td>
					<td>{{ form.finish_time.errors }}</td>
				</tr>
			</table>
			<br/>
			<input type="submit" value="Update" />
		</form>
		<div id="tip_tpc" class="hidden">
			<p>
				<strong>Tip:</strong>
				You have used the word <strong>"my"</strong> or <strong>"me"</strong> in your update. WhatYou will automatically translate these words to <strong>"his/her"</strong> or <strong>"him/her"</strong> respectively when other people are viewing your updates. You can override this by prefixing an exclamation mark before the word, e.g. <strong>"!my"</strong> or <strong>!me</strong>.
			</p>
			<p>
		</div>
		<h2>Your Updates</h2>
		<table class="updates" cellpadding="0" cellspacing="0">
			{% for user_update in user_updates|dictsortreversed:"start_time" %}
				<tr class="{% cycle "alternate" "" %}">
					<td class="update_body">
						{% ifequal user user_update.owner.user %}I am{% else %}<a href="/people/{{ user_update.owner.key }}">{{ user_update.owner.friendly_name }}</a> is {% endifequal %}
						{{ user_update.verb.name }}
						{% ifequal user user_update.owner.user %}{{ user_update.body_fpc }}{% else %}{{ user_update.body_tpc }}{% endifequal %}
						{% if user_update.is_temporary %}
							<i>(expires in {{ user_update.finish_time|timeuntil }})</i>
						{% endif %}
					</td>
					{% ifequal user user_update.owner.user %}
						<td class="update_action">
							{% if user_update.is_temporary %}
								<a href="/update/expire/{{ user_update.key }}/null" title="Mark this update as finished">
									<img src="/static/images/icons/finish.png" border="0" alt="Finished" />
								</a>
							{% endif %}
						</td>
						<td class="update_action">
							<a href="/update/delete/{{ user_update.key }}/null" title="Delete this update permanently">
								<img src="/static/images/icons/stop.png" border="0" alt="Delete" />
							</a>
						</td>
					{% else %}
						<td class="update_action">&nbsp;</td>
						<td class="update_action">&nbsp;</td>
					{% endifequal %}
					<td class="update_action">
						<a href="people/that_are/{{ user_update.key }}" title="View other users also doing this">
							<img src="/static/images/icons/friends.png" border="0" alt="View Other Users" />
						</a>
					</td>
				</tr>
			{% endfor %}
		</table>
	{% endifequal %}

{% endblock %}